<template>
	<view>
		<uni-popup ref="single-popup" type="bottom" :hideBar="hideBar">
			<view class="single-popup">
				<image :src="topLeftIcon" mode="aspectFill" class="top-left-icon"></image>
				<text class="iconfont icon-close1 gotwill-icon-close" @click="close"></text>
				<view class="popup-header">
					<user-avatar :src="wish.avatar_url" />
					<view class="popup-header-info">
						<view class="header-support-info">支持TA<text :class="{'line-through':isFree}">¥{{costNum}}</text><tag text='免费特权' class="free-tag" v-if="isFree" /></view>
						<view class="header-get-num">你得 <icon-heart />{{getCoinNum}}{{extraGive>0?`+${extraGive}`:''}}</view>
					</view>
				</view>
				<view  class="popup-exchange" v-if="recommandGood">
					<view class="exchange-title">
						支持后，你的账户<icon-heart /><text class="red">心愿值</text>{{isEnough?'':'即将'}}可发起
					</view>
					<view class="goods-box">
						<image :src="recommandGood.goods_img_url" class="goods-img" mode="aspectFill"></image>
						<view class="goods-name">
							{{recommandGood.goods_name}}心愿
						</view>
					</view>
				</view>
				<exchange-list :title="midTitle" :list="exchangeList" v-else></exchange-list>
				<view class="wish-btn popup-footer"  @click="confirm">确认支持</view>
			</view>
		</uni-popup>
		<support-success :visible.sync="successPopupVisible" :isTopOffset="isTopOffset" :getNum="getCoinNum" :groupId="wish.group_id" :showMore="showMore"></support-success>
	</view>
</template>

<script>
	import SupportSuccess from '@/components/support-success-popup.vue'
	import UserAvatar from '@/components/user/avatar.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import ExchangeList from '@/components/pay-popup/exchange-list.vue'
	export default {
		name:'single-popup',
		components:{
			UserAvatar,
			uniPopup,
			ExchangeList,
			SupportSuccess
		},
		props:{
			visible:{
				type: Boolean,
				default:false
			},
			hideBar:{
				type: Boolean,
				default:false
			},
			isTopOffset:{
				type: Boolean,
				default:true
			},
			showMore:{
				type: Boolean,
				default:true
			}
		},
		data() {
			return {
				wish:{},
				info:{},
				getCoinNum:0,
				costNum:0,
				extraGive:0,
				wishTip:'',
				successPopupVisible:false,
				topLeftIcon:'',
				canExchange:false,
				recommandGood:'',
				midTitle:'',
				isFree:false,
				isEnough:false,
				exchangeList:[]
			};
		},
		methods:{
			open({wish}){
				this.wish=wish
				this.getInfo(wish.group_id).then(()=>{
					this.$refs['single-popup'].open()
				})
			},
			close(){
				this.$refs['single-popup'].close()
			},
			async confirm(){
				await this.$store.dispatch('supportWish',this.wish.group_id)
				this.close()
				this.successPopupVisible=true
				this.$emit('success')
			},
			async getInfo(id){
				let data =await this.$api.getBeforeSupportInfo({group_id:id})
				let info=data.support_wish_reward_info
				this.wishTip=info.wish_coin_text
				this.recommandGood=info.recommend_goods_info
				this.isEnough=info.wish_coin_enough===1
				this.getCoinNum=info.wish_coin_num
				this.costNum=data.need_pay_money
				this.extraGive=info.extra_give
				this.exchangeList=info.goods_list
				this.midTitle=data.wish_coin_effect
				this.topLeftIcon=info.top_left_icon
				this.isFree=info.is_free===1
				return data
			}
		}
	}
</script>

<style lang="scss" scoped>
.single-popup{
	position: relative;
	padding:55rpx 36rpx calc(15rpx + var(--safe-area-inset-bottom));
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	background-color: #fff;
	.top-left-icon{
		position: absolute;
		top:20rpx;
		left: 20rpx;
		width: 126rpx;
		height: 126rpx;
		z-index: 2;
	}
	.gotwill-icon-close{
		position: absolute;
		font-size: 50rpx;
		color:#B1B1B1;
		top:20rpx;
		right:20rpx;
		z-index: 2;
	}
	.popup-header{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 49rpx;
	}
	.popup-header-info{
		margin-left: 20rpx;
	}
	.header-support-info{
		position: relative;
		font-size: 26rpx;
		color:#000;
		margin-bottom: 6rpx;
	}
	.free-0{
		display: inline-block;
		margin-right:10rpx;
	}
	.free-tag{
		position: absolute;
		left:calc(12rpx + 100%);
		top:50%;
		transform: translateY(-50%);
	}
	.header-get-num{
		font-size: 28rpx;
		color:#E7404A;
		font-weight: bold;
		.iconfont{
			font-size: 28rpx;
			font-weight: normal;
		}
	}
	.popup-exchange {
		border-radius:10rpx;
		border:1px solid #E0E0E0;
		padding: 22rpx 0;
		margin-bottom: 35rpx;
	}
	.exchange-title{
		margin-bottom: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color:#333;
		text-align: center;
	}
	.red{
		color:#E7404A;
	}
	.goods-box{
		width: 220rpx;
		margin: 0 auto;
	}
	.goods-img{
		display: block;
		width: 220rpx;
		height: 220rpx;
		margin-bottom: 10rpx;
		border-radius: 4rpx;
	}
	.goods-name{
		font-size: 24rpx;
		line-height:33rpx;
		color: #666;
		text-align: center;
		word-break: break-all;
	}
	.popup-footer{
		display: flex;
		width:100%;
		height:90rpx;
		background-color: #E7404A;
	}
}
</style>
